<template>
  <div class="home">
      <div class="login">
        <h2>登录页面</h2>
          <el-form :model="loginform" :rules="rules" ref="form" >
  <el-form-item  prop="username">
    <el-input v-model="loginform.username" placeholder="请输入用户名"     prefix-icon="el-icon-user"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="loginform.password" placeholder="请输入密码"     prefix-icon="el-icon-lock"></el-input>
  </el-form-item>  
   <el-form-item>   
   <p>   <el-button type="primary" @click="dl">登录</el-button> <el-button type="info">重置</el-button></p>
   </el-form-item> 
</el-form> 
      </div> 
  </div>
</template>
<script>
import { loginApi } from "@/http/api"; 
export default {
  data() {
    return {
      loginform: {
        username: "admin",
        password: "123456"
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    //登录
    dl(){
      this.$refs.form.validate(async valid => {
        if (!valid) {
          this.$message.error(res.msg) 
          return false;
        } else {
          //请求后端接口
           const res = await loginApi(this.loginform);
           console.log(res) 
           sessionStorage.setItem("token",res.token) 
           this.$router.push("/home") 
          // sessionStorage.setItem("token", res.token);
        }
      });
    }
  }
};
</script>
<style>
.home {
  width: 100%;
  height: 100%;
  background: #2b4b6b;
  position: relative;
}
.login {
  width: 35%;
  height: 300px;
  border: 1px solid #ddd;
  box-shadow: 5px 5px 5px #ddd;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 20px;
  background: white;
}
p {
  float: right;
  margin-right: 15px;
}
</style>

